import React, { Component, PropTypes } from 'react';
import { Form, Icon, Input, Button, Checkbox,message } from 'antd';
import Md5 from 'js-md5';
import { connect } from 'dva'
import Style from './repassword.less';
import Service from '../service';

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: { span: 5},
  wrapperCol: { span: 17 },
};
const VerifLayout = {
  labelCol: { span: 5},
  wrapperCol: { span: 6 },
};
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      userMsg: {},
      btnText:'获取验证码',
      seconds: 60, //称数初始化
      liked: true, //获取验证码文案
      str:'password',
      text:'密码'
    }
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const params = {
          password: values.password,
          password_confirm: values.password_confirm,
          mobile:values.mobile,
          verify_code: values.verify_code,
          func: () => {
            this.context.router.push(`/login`);
          }
        }
        this.props.queryUser({ ...params });
        //this.props.saveUser({ id: '131341313431', user: '蛮王' })
      }
    });
  };
  // 获取验证码
  sendCode = () => {
    var self=this;
    let phone=this.props.form.getFieldValue('mobile');
    if(!phone){
      return message.error('请输入手机号');
    }
    const params = {
      mobile:phone,
      type:'find_password',
      getCode: (code) => {
        self.codepage();
        message.success('您的验证码是：'+code);
        // message.success('验证码已发送到您的手机');
      }
    }
    this.props.querySendCode({ ...params });

  }
  codepage=()=>{
    let siv = setInterval(() => {
      this.setState({
        liked:false,
        seconds:this.state.seconds - 1,
      },() => {
        if(this.state.seconds == 0){
          clearInterval(siv);
          this.setState({
            liked:true,
            seconds:60
          })
        }
      });
    },1000);
  }
  // 密码明文暗纹
  pwdtap=(e)=>{
    if(this.state.str=='text'){
      this.setState({str:'password',text:'密码'})

    }else{
      this.setState({str:'text',text:'明文'})

    }
  }
  back=()=>{
    this.context.router.push(`/login`);
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className={Style.regBoxs}>
        <div className={Style.headWrap}>
          <div className={Style.navTitle}>
            找回密码
            <span className={Style.arrow} onClick={this.back}>
              <Icon type="left" theme="outlined" />
            </span>

          </div>
        </div>
        <div className={Style.authBoxs}>
          <div className={Style.content}>
            <div className={Style.inputBox}>
              <Form onSubmit={this.handleSubmit} className="login-form">

                {/* <FormItem  label='账号' {...formItemLayout}>
                  {getFieldDecorator('name', {
                    rules: [{ required: true, message: '请输入账号' }]
                  })(
                    <Input placeholder="请输入2-5个汉字或者16个字符" autoComplete="username"/>
                  )}
                </FormItem> */}
                <FormItem  label='手机号' {...formItemLayout}>
                  {getFieldDecorator('mobile', {
                    rules: [{ required: true, message: '请输入手机号码' }]
                  })(
                    <Input placeholder="请输入手机号码" autoComplete="mobile"/>
                  )}
                </FormItem>
                <FormItem  label='验证码:' {...formItemLayout}>
                  {getFieldDecorator('verify_code', {
                    rules: [{ required: true, message: '请输入验证码' }]
                  })(
                    <Input placeholder="请输入验证码" autoComplete="verify_code" style={{width:'120px'}}/>
                  )}

                  {
                    this.state.liked
                      ?
                      <span className={Style.code}  onClick={this.sendCode}> <span>{this.state.btnText}</span></span>
                      :
                      <span className={Style.code} ><span>{this.state.seconds + 's'}</span></span>
                  }
                </FormItem>
                <FormItem  label='新密码' {...formItemLayout}>
                  {getFieldDecorator('password', {
                    rules: [{ required: true, message: '请输入新密码' }]
                  })(
                    <Input placeholder="请输入6-10位密码"   type="password" autoComplete="current-password"/>
                  )}

                </FormItem>
                <FormItem  label='确认密码' {...formItemLayout}>
                  {getFieldDecorator('password_confirm', {
                    rules: [{ required: true, message: '请输入确认密码' }]
                  })(
                    <Input placeholder="请确认密码" type={this.state.str} autoComplete="password_confirm"/>
                  )}
                  {this.state.str=='text' &&
                  <div className={Style.loginIcon+' '+Style.loginPwdClose} onClick={this.pwdtap}></div>
                  }
                  {this.state.str!='text' &&
                  <div className={Style.loginIcon+' '+Style.loginPwdShow} onClick={this.pwdtap}></div>
                  }

                </FormItem>
                <FormItem style={{ textAlign: 'center',marginTop:'30px' }}>
                  <Button type="primary" htmlType="submit">确定</Button>
                  <Button style={{marginLeft:20}} onClick={this.back}>返回</Button>
                </FormItem>
              </Form>

            </div>

          </div>
        </div>


      </div>
    )
  }
}

App.contextTypes = {
  router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
  return {
    userMsg: state.login.userMsg,
    data: state.login.data.data
  }
}
function dispatchToProps(dispatch) {
  return {
    saveUser(payload, params) {
      dispatch({
        type: 'login/saveUser',
        payload
      })
    },
    queryUser(payload, params) {
      dispatch({
        type: 'repassword/queryUser',
        payload
      })
    },
    querySendCode(payload, params) {
      dispatch({
        type: 'register/sendCode',
        payload
      })
    }
  }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
